<template>
    <div class="Theone">
        <div class="container">
            <tmptab :active="0"></tmptab>
            <div class="download" @click="download">下载服务项目表格模板</div>
            <div class="uploading">
                <Upload
                    multiple
                    type="drag"
                    :action="uploadUrl"
                    :on-success="handleSuccess"
                    :headers="fromData"
                    :show-upload-list="true"
                >
                    <div class="download">
                        <Icon type="ios-cloud-upload" size="52"></Icon>
                        <p>上传填好的服务项目表格</p>
                    </div>
                </Upload>
            </div>
            <div class="buttonbox">
                <Button type="primary" class="w-btn" :class="{'disabled':disabled}" @click="next">
                   <i class = "iconfont icon-down"></i>下一步
                </Button>
                <Button type="primary" class="w-btn" @click="reback">
                    <i class = "iconfont icon-butongyi"></i>取消
                </Button>
            </div>
        </div>
    </div>
</template>
<script>
import { Upload } from "view-design";
import tmptab from "./tmptab";
import code from "@/configs/base.js";
import api from "@/api/commonApi";
export default {
    components: {
        Upload,
        tmptab
    },
    data() {
        return {
            uploadUrl: api.fdspackageiteminsertbatch,
            uploadData: {
                json: '{"urlCode":"' + code.urlCode.hospitalBanner + '"}'
            },
            disabled: true,
            errorData: {
                fail:[],
                success:0
            }
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/servicePackage/pindex",
                title: "签约服务包"
            },
            {
                path: "/index/operation/servicePackage/itemList",
                title: "签约服务项"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        download() {
            location.href = this.fileBaseUrl + "excel/drugtemplate.xls";
            this.$axios
                .post(api.organizationdownloadtemplate, {
                    type: 3
                })
                .then(res => {
                    if (res.data.code) {
                        let ret = res.data;
                        window.open(ret.message);
                    }
                });
        },
        handleSuccess(res, file) {
            res = this.uploadFileDecrypt(res);
            if (res.code) {
                // let ret = res.object[0];
                // this.disabled = false;
                // this.errorData.success += ret.success;
                let ret = res.object[0];
                this.disabled = false;
                this.errorData = ret;
                this.$Message.info("上传成功");
                /* 移除上传文件列表的删除图标 start */
                let uploadListObj = window.document.getElementsByClassName('ivu-upload-list')[0];
                for(let i=0;i<uploadListObj.children.length;i++){
                    let liList = uploadListObj.children[i];
                    let removeIcon = liList.children[1];
                    if(removeIcon)
                    removeIcon.parentNode.removeChild(removeIcon);
                }
                /* 移除上传文件列表的删除图标 end */
            } else {
                this.$Message.info("上传失败,请重试");
            }
        },
        next() {
            console.log(this.errorData)
            if (!this.disabled) {
                 //   公用方法
                this.functionJS.queryNavgationTo(this,"/index/directory/serviceItems/itemTwoStep",{
                        fail: this.errorData
                }
            );
            } else {
                this.$Message.info("请选择批量上传的文件");
            }
        },
        reback() {
             //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/directory/serviceItems/list"
            );

        }
    }
};
</script>
<style lang="less" scoped>
.Theone {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        .uploading {
            width: 60%;
            margin: 0 auto;
            height: 200px;
            color: #5362e1;
        }
        .download {
            margin: 20px auto;
            text-align: center;
            cursor: pointer;
            color: #5362e1;
        }
        .next {
            width: 100px;
            line-height: 30px;
            border: none;
            outline: none;
            border-radius: 4px;
            color: #fff;
            background: skyblue;
        }
        .buttonbox{
           text-align:center;
           margin-bottom: 20px
        }
        .iconfont{
            font-size:14px;
            margin-right:5px
        }
    }
}
</style>